<template>
  <div class="singlePage">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="pa-form"
      style="width: 425px">
      <el-form-item label="当前用户:">
        <el-input v-model="ruleForm.user" autocomplete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="当前密码:" prop="currentPass">
        <el-input type="password" v-model="ruleForm.currentPass" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码:" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认新密码:" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" style="float: right">提交</el-button>
        <el-button style="float: right; margin-right: 10px" @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      //必须包含大小写字母、数字、特殊字符长度再8-16位之间
      var regex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}");
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 8 || value.length > 16) {
        callback(new Error("请输入8~16位密码"));
      } else if (!regex.test(value)) {
        callback(new Error("密码必须同时包含字母、数字和特殊字符其中三项且至少8位"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
      // if (value === "") {
      //   callback(new Error("请输入密码"));
      // } else {
      //   if (this.ruleForm.checkPass !== "") {
      //     this.$refs.ruleForm.validateField("checkPass");
      //   }
      //   callback();
      // }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        user: "",
        currentPass: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  created() {
    // this.getyy();
    this.ruleForm.user = JSON.parse(localStorage.getItem("userInfo")).roleName;
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // resetPSW
          const params = {
            id: JSON.parse(localStorage.getItem("userInfo")).id,
            rePassword: this.ruleForm.currentPass,
            password: this.ruleForm.checkPass,
          };
          const res = await this.$api.resetPSW(params);
          if (res.code === 200) {
            this.ruleForm = {
              user: JSON.parse(localStorage.getItem("userInfo")).roleName,
              currentPass: "",
              pass: "",
              checkPass: "",
            };
            this.$message.success(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.singlePage {
  display: flex;
  justify-content: center;

  //   align-items: center;
  .pa-form {
    margin-top: 29px;

  }
}
</style>